<template>
  <div>
    <!-- 惊叹一句，想出的人是天才啊 -->
    <el-dialog :title="{add:'新增内容',look:'编辑内容'}[mode]" :visible.sync="isShow" width="800px" @close="colose">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model.trim="form.name" type="text" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model.trim="form.code" type="text" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <!-- 点击选项框才触发请求获取用户信息：避免造成性能浪费 -->
          <el-select v-model="form.manager" @focus="getName">
            <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model.trim="form.introduce" type="text" />
        </el-form-item>
      </el-form>
      <template>
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { sysusersimple, companydepartmentpost, companydepartmentput } from '@/api/deparments.js'
export default {
//   props: {
//     isShow: {
//       type: Boolean,
//       default: false
//     }
//   },
// 接受父组件传过来的的所有组织架构值
  props: {
    inittreedata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 判断新增弹出框是否显示
      isShow: false,
      //   定义一个变量接受传过来的当前点击项
      item: '',
      form: {
        code: '', // string	非必须		部门编码，同级部门不可重复
        introduce: '',	// string	非必须		介绍
        manager: '',	// string	非必须		负责人名称
        name: '',	// string	非必须		部门名称
        pid: ''
      },
      rules: {
        code: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50位字符', trigger: 'blur' },
          //   判断部门编码是否重复
          { validator: (rules, value, callback) => {
            let res = null
            //   判断弹出框的状态是什么然后分别给出对应不同的验证规则
            if (this.mode === 'add') {
              //   如果判断数组里面有跟输入相同的id则返回错误
              res = this.inittreedata.some(item => {
                return item.code === value
              })
            } else if (this.mode === 'look') {
              // 判断规则位排除当前项的code值和子结构的code值
            //   和所有项进行对比并排除自己
              res = this.inittreedata.some(item => {
                return item.code === value && item.id !== this.item.id
              })
            }
            res ? callback(new Error('部门编码已存在')) : callback()
          }, trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50位字符', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50位字符', trigger: 'blur' },
          //   给部门名称一个自定义表单验证
          { validator: (rules, value, callback) => {
            // 判断什么模式的弹出框
            let resList
            if (this.mode === 'add') {
              //   找到当前点击项的子节点数据
              resList = this.inittreedata.filter(item => {
              // 判断子节点中的pid是否与点击项的id是否相等，相等的话返回点击项的子节点数据
                if (item.pid === this.item.id) {
                  return true
                }
              //   判断子节点的name值与输入的部门名称是否有重复的
              })
            // 判断当前输入的名称是否于子节点重复，重复的话就提示用户，反之就继续进行下去
            } else if (this.mode === 'look') {
              // 判断输入的部门名是否与兄弟元素，如果同名了就报错
              resList = this.inittreedata.filter(item => {
                //   获取当前点击的所有兄弟元素
                if (item.pid === this.item.pid && item.id !== this.item.id) {
                  return true
                }
              })
            }
            // 遍历生成的兄弟元素，如果与输入的值名字相同则报错，否贼的话正常执行
            const res = resList.some(item => {
              return item.name === value
            })
            res ? callback(new Error(`${value}名称已存在`)) : callback()
          }, trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50位字符', trigger: 'blur' }
        ]
      },
      //   负责人性名列表
      managerList: [],
      //   定义一个变量用于接收当前弹出框是什么状态
      mode: 'add'
    }
  },
  //   //   注册监听事件，来监听弹框是否关闭；当弹框关闭的时候清空输入框的数据和验证表单数据
  //   watch: {
  //     'isShow': {
  //       handler(newVal) {
  //         //   判断弹出框是关闭还是开启状态
  //         if (!newVal) {
  //           // 调用element-ui中form内置的方法清空数据库和验证信息·
  //           this.$refs.form.resetFields()
  //         }
  //       }
  //     }
  //   },
  // 兄弟组件传值
  created() {
    this.$bus.$on('addevent', (show, item, mode) => {
      this.isShow = show
      this.item = item
      //   如果弹出的是修改内容弹框，那表单验证变了啊
      this.mode = mode
      //   涉及到深拷贝浅拷贝知识点
      //   这样对象=对象是浅拷贝的复制，当其中某一个对象发生修改时，另一个对象中的值也被修改了
      //   所以需要深拷贝
      if (this.mode === 'look') {
        this.form = JSON.parse(JSON.stringify(item))
      }
      //   this.form = item
      console.log(this.item)
    })
  },
  // 兄弟组件之间传值要及时解绑否贼会造成内存泄漏
  beforeDestroy() {
    this.$bus.$off('addevent')
  },
  methods: {
    // 关闭弹框
    cancel() {
    //   this.$bus.$emit('addevent', true)
      this.isShow = false
    },
    async getName() {
      console.log(111)
      const res = await sysusersimple()
      //   console.log(res)
      this.managerList = res.data
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        // 判断是那种模式的弹出框，点击确定按钮得到不同的结构
        if (this.mode === 'add') {
          if (result) {
            this.form.pid = this.item.id
            // 调用api接口添加新增架构
            // 关闭弹框
            // 清空输入框的文本
            // 弹出新增成功弹框
            // 刷新架构组织
            await companydepartmentpost(this.form)
            this.isShow = false
            //   刷新组织结构渲染数据
            this.$emit('getData')
            this.$message.success('新增成功')
          } else {
            this.$message.error('新增失败')
          }
        } else if (this.mode === 'look') {
          if (result) {
            //   调用api修改部门信息
            await companydepartmentput(this.form)
            // 关闭弹框
            this.isShow = false
            // 刷新页面
            this.$emit('getData')

            // 修改成功后弹出弹框
            this.$message.success('修改成功')
          } else {
            this.$message.error('编辑失败')
          }
        }
      })
    },
    // 当弹框关闭时都会触发close事件
    colose() {
      this.$refs.form.resetFields()
      //   自己手动那表单数据清空---重置表单数据为初始化数据（表单第一次渲染是的数据，请出表单验证）
      this.form = {
        code: '', // string	非必须		部门编码，同级部门不可重复
        introduce: '',	// string	非必须		介绍
        manager: '',	// string	非必须		负责人名称
        name: '',	// string	非必须		部门名称
        pid: ''
      }
    }
  }

}
</script>

<style>

</style>
